<script setup>
  import { ref,computed,onMounted  } from 'vue'
  import {useRoute} from "vue-router"; //引入路由
  import router from "@/router/index.js"; //发送的
  import { getRoomDetailByRoomId,submitOrder } from '@/api/shouyePub.js'

  //接受参数
  const route = useRoute();
  console.log(route)
  const id = ref(route.query.roomId) //房间id
  //入住时间
  const checkIn = ref(route.query.checkIn)
  //离店时间
  const checkOut = ref(route.query.checkOut)

  //房间信息
  const roomInfo = ref({
  })

  //订单信息

  //获取房间信息
  const getRoomInfo = async (id1) => {
    const res = await getRoomDetailByRoomId(id1)
    roomInfo.value = res.data.data
    console.log(roomInfo.value)
  }

  onMounted(() => {
    getRoomInfo(id.value)
  })


  // 计算住宿天数
  const nights = computed(() => {  //计算属性,防止未加载
    const start = new Date(checkIn.value)
    const end = new Date(checkOut.value)
    const diffTime = end - start
    return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) || 0
  })

  const orderInfo = computed(() => ({
    orderName: roomInfo.value.roomName || '', // 处理未加载状态
    classification: 3,
    startTime: checkIn.value,
    endTime: checkOut.value,
    price: roomInfo.value.price * nights.value || 0,       // 默认值防止 NaN
    good: id.value
  }))

  const checked1= ref(false)

  //提交酒店订单
  const submitOrders =async () => {
    if (!checked1.value){
      ElMessage({
        message: '请先阅读并同意预订协议',
        type: 'warning',
      })
      return
    }
    const orderInfoData = await submitOrder(orderInfo.value)
    console.log(orderInfoData)
    if (orderInfoData.data.code == 200) {
      ElMessage({
        message: '预订成功',
        type: 'success',
      })
      await router.push({path: '/MyXinXi'})
      //强制刷新
      location.reload()
    } else {
      ElMessage({
        message: '预订失败',
        type: 'error',
      })
    }
  }
</script>

<template>
  <el-container id="pubRes">

    <el-main  style="padding: 0">
      <div class="content">
        <div class="book-content">
          <div class="info-content">
            <h1 class="flex">预订信息</h1>
            <div class="hi-readme flex mb-[10px]">
              <span class="w-[64px] font-[700] hi-readme-btn mr-[5px]">订房必读:</span>
              <div class="flex-[1] hi-readme-txt">仅接待持有中国内地签发的有效居民身份证的客人</div>
              <span class="w-[60px] cursor-pointer text-right" data-events="click">查看更多</span>
            </div>
            <hr class="hr mb-[16px]">
            <div class="guestInfo">
              <h2>入住信息</h2>
              <dl class="clearfix mb-[16px]">
                <dt class="fl w-56">入离日期</dt>
                <dd class="fl time">
                  <div class="room-info">
                    <div class="bed-info flex items-center">
                      <div class="flex flex-col">
                        <div class="text-[#111] text-[14px] leading-none">{{checkIn}}</div>
                        <div class="text-[#111] opacity-50 mt-[8px] leading-none text-[12px]">14:00之后</div>
                      </div>
                      <div class="flex items-center mx-[10px] h-[24px] px-[4px] leading-none bg-[#F5F5F5] rounded-[2px]">{{nights}}晚</div>
                      <div class="flex flex-col"><div class="text-[#111] text-[14px] leading-none">{{checkOut}}</div>
                        <div class="text-[#111] opacity-50 mt-[8px] leading-none text-[12px]">12:00之前</div>
                      </div>
                    </div>
                  </div>
                </dd>
              </dl>
            </div>
            <section class="Cancellation mt-[40px]">
              <h2>取消政策</h2>
              <span class="cancellation-tips">
                <svg class="svg-icon icon-icon-cancel cancel cancel" style="color: rgb(6, 197, 132);">
                  <use xlink:href="#icon-icon-cancel"></use>
                </svg>
                入住日18点前免费取消
              </span>
              <div class="food-hover-box">
                <div class="food-hover">
                  <div class="arrow-up"></div>
                  <div class="table-info" style="max-width: unset; overflow-x: hidden;">
                    <div class="table-info-header">
                      <div class="t-content">北京时间</div>
                      <div class="t-content">取消&amp;修改费用</div>
                    </div>
                    <div>
                      <div style="display: flex;"></div>
                      <div style="display: flex;">
                        <p class="t-content-p">18:00 前</p>
                        <p class="t-content-p" style="color: green;">免费取消</p>
                      </div>
                      <div style="display: flex;">
                        <p class="t-content-p">18:00～ 00:00</p>
                        <p class="t-content-p" style="">仅扣20%手续费</p>
                      </div>
                      <div style="display: flex;">
                        <p class="t-content-p">00:00 后</p>
                        <p class="t-content-p" style="">不可取消</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </div>
          <div class="flex flex-col flex-1" style="margin:20px 0px 20px 20px;">
            <div class="order-price">
              <div class="flex">
                <img class="w-[104px] h-[112px] object-cover" :src="roomInfo.path" alt="">
                <div class="ml-[12px]">
                  <div class="mt-[4px] flex flex-nowrap">
                    <div class="text-[18px] font-[700] truncate w-[210px]">{{roomInfo.address}}</div>
                  </div>
                  <div class="text-[14px] font-[500] two-line-ellipsis" title="加州电视智能大床房（高空景观--语音控制）">{{roomInfo.size}}平米{{roomInfo.roomName}}（高空景观--语音控制）</div>
                  <div class="text-[14px] font-[500]">{{roomInfo.detailedAddress}}</div>
                </div>
              </div>
              <div class="divider my-[24px]"></div>
              <div class="items-start">
                <div class="fang_fei">线上预付</div>
                <div class="flex flex-col items-end">
                  <div class="xsyf">¥{{roomInfo.price * nights}}</div>
                </div>
              </div>
            </div>
            <div class="confirmBox">
              <el-checkbox v-model="checked1" label="Option 1" size="large">
                <div class="checkbox-content">
                  请您在提交订单前仔细阅读
                  <a href="javaScript:;" class="dis">《同程旅行酒店服务条款》</a>
                  和
                  <a href="javaScript:;" class="dis">《个人信息授权声明》</a>
                </div>
              </el-checkbox>
              <div data-events="click" class="button" @click="submitOrders">去支付</div>
            </div>
          </div>
        </div>
      </div>
    </el-main>

  </el-container>
</template>

<style scoped lang="scss">
  .el-main{
    .text-\[14px\] {
      font-size: 14px;
    }
    .text-\[12px\] {
      font-size: 12px;
    }
    .text-\[\#111111\], .text-\[\#111\] {
      --tw-text-opacity: 1;
      color: rgb(17 17 17 / var(--tw-text-opacity));
    }
    .mt-\[8px\] {
      margin-top: 8px;
    }
    .mt-\[40px\] {
      margin-top: 40px;
    }
    .px-\[4px\] {
      padding-left: 4px;
      padding-right: 4px;
    }
    .bg-\[\#F5F5F5\] {
      --tw-bg-opacity: 1;
      background-color: rgb(245 245 245 / var(--tw-bg-opacity));
    }
    .h-\[24px\] {
      height: 24px;
    }
    .mx-\[10px\] {
      margin-left: 10px;
      margin-right: 10px;
    }
    .font-\[700\] {
      font-weight: 700;
    }
    .w-\[64px\] {
      width: 64px;
    }
    .mr-\[5px\] {
      margin-right: 5px;
    }
    .flex-\[1\] {
      flex: 1;
    }
    .mb-\[16px\] {
      margin-bottom: 16px;
    }
    .w-\[104px\] {
      width: 104px;
    }
    .h-\[112px\] {
      height: 112px;
    }
    .ml-\[12px\] {
      margin-left: 12px;
    }
    .my-\[24px\] {
      margin-bottom: 24px;
      margin-top: 24px;
    }
  }
  .items-start {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: white;
    font-family: system-ui, -apple-system, sans-serif;
  }

  .fang_fei {
    color: #FF4445;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.5px;
  }

  .xsyf {
    color: #000;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
  }
  .dis{
    text-decoration: none;
    color: rgba(0,0,0,0.48);
  }
  .confirmBox {
    align-items: center;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 2px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 24px;
    width: 431px;
  }
  .checkbox-content {
    display: inline-block;
    white-space: normal;
    line-height: 1.5;
  }
  /* 支付按钮样式 */
  .button {
    width: 383px;
    background: #00b96b;
    color: #fff;
    padding: 12px 30px;
    box-sizing: border-box;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s;
    margin-top: 10px;
  }
  .button:hover {
    background: #009658; /* 悬停深绿色 */
    box-shadow: 0 2px 6px rgba(0, 185, 107, 0.3);
  }

  .content{
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    width: 1200px;
  }
  .book-content{
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: 0 80px;
    width: 100%;
  }
  .info-content{
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: space-between;
    width: 550px;
    .guestInfo{
      h2{
        font-family: PingFang SC;
        font-style: normal;
        font-weight: 600;
        white-space: nowrap;
        color: var(--Color-Uasge-TextIcon-color-primary);
        font-size: 20px;
        line-height: 20px;
        margin-bottom: 24px;
        margin-right: 8px;
      }
      .clearfix{
        display: flex;
        .time {
          display: flex;
          flex: 1;
          flex-wrap: wrap;
        }
        .w-56 {
          color: var(--Color-Uasge-TextIcon-color-tertiary);
          font-size: 14px;
          width: 66px;
        }
      }
    }
    .Cancellation {
      font-size: 12px;
    }
  }
  .flex{
    display: flex;
  }
  .items-center {
    align-items: center;
  }
  .flex-col {
    flex-direction: column;
  }
  .opacity-50 {
     opacity: .5;
  }
  .svg-icon {
    fill: currentColor;
    height: 1em;
    vertical-align: middle;
    width: 1em;
  }
  .food-hover-box {

    .food-hover{
      color: #111;
      font-weight: 400;
      position: relative;
    }
  }
  .table-info {
    border-left: .5px solid #e7e7e7;
    border-radius: 2px;
    font-size: 14px;
    margin-bottom: 10px;
    margin-top: 10px;
    max-width: 300px;
    overflow-x: scroll;
    .table-info-header{
      display: flex;
      font-size: 12px;
      font-weight: 600;
      justify-content: flex-start;
      .t-content {
        background: rgba(0, 0, 0, .02);
      }
    }
    .t-content {
      align-items: center;
      border-bottom: .5px solid hsla(0, 0%, 7%, .07);
      border-right: .5px solid hsla(0, 0%, 7%, .07);
      border-top: .5px solid hsla(0, 0%, 7%, .07);
      display: flex;
      flex-shrink: 0;
      padding: 10px 16px;
      width: 141px;
    }
    .t-content-p {
      align-items: center;
      border-bottom: .5px solid hsla(0, 0%, 7%, .07);
      border-right: .5px solid hsla(0, 0%, 7%, .07);
      border-top: .5px solid hsla(0, 0%, 7%, .07);
      display: flex;
      flex-shrink: 0;
      padding: 10px 16px;
      width: 141px;
    }
  }


  .cursor-pointer {
    cursor: pointer;
  }


  .hi-readme {
    font-size: 14px;
    margin: 10px 0;
    .hi-readme-btn {
      color: #50a673;
    }
    .hi-readme-txt {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .order-price {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 2px;
    color: #111;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 16px;
    padding: 24px 22px;
    width: 431px;
    box-sizing: border-box;
  }
  .object-cover {
    object-fit: cover;
  }
  .divider {
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    height: 0;
  }
</style>